<template>
	<view>
		<uni-nav-bar @clickLeft="clickLeft" fixed="true" left-icon="arrowleft" title="网易云音乐" background-color="#d44439" color="white"></uni-nav-bar>
		<view class="container">
			<YongHuInfo :avatarUrl="avatarUrl" :backgroundUrl="backgroundUrl" :nickname="nickname"></YongHuInfo>
			<YongHuGeDan @jump="jump" :playlist="playlist"></YongHuGeDan>
		</view>
	</view>
</template>

<script>
	import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue"
	import YongHuInfo from '../../components/YongHuInfo/YongHuInfo.vue'
	import YongHuGeDan from '../../components/YongHuGeDan/YongHuGeDan.vue'
	import {detail,playlist} from  '../../api/UserInfo/UserInfo.js'
	export default {
		components:{
			uniNavBar,
			YongHuInfo,
			YongHuGeDan
		},
		onLoad(option) {
			detail({uid:option.userid}).then(res => {
				this.avatarUrl = res.profile.avatarUrl//用户头像
				this.backgroundUrl = res.profile.backgroundUrl//用户背景图片
				this.nickname = res.profile.nickname//用户名字
			})
			playlist({uid:option.userid}).then(res => {
				this.playlist = res.playlist
			})
		},
		data() {
			return {
				avatarUrl:'',
				backgroundUrl:'',
				nickname:'',
				playlist:[]
			}
		},
		methods:{
			jump(id){
				uni.navigateTo({
					url:'../AllGeDan/AllGeDan?id=' + id + '&num=1'
				})
			},
			clickLeft(){
				uni.navigateBack({
				    delta: 1
				})
			}
		}
	}
</script>

<style lang="scss">
	.container{
		width: 750rpx;
	}
</style>
